@charset "utf-8";

$baseFont:40;
@function r($px){
 @return $px/$baseFont * 1rem;
}
@import  './_reset';








html,body{
 width: 100%;
 height: 100%;
overflow: hidden;
}

.web{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	
	// 头部
	.header_content{
		width: 100%;
		height: r(89);
		background-color: #b20000;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		
		.left_logo{
			width: r(31);
			height: r(24);
			
			
			img{
				width: 100%;
				height: 100%;
				margin-top: r(33);
				margin-left: r(23);
			}
		}
		.middle_logo{
			display: inline-block;
			width: r(264);
			height: r(40);
			img{
				width: 100%;
				height: 100%;
				margin-top: r(25);
			}
		}
		.search_logo{
			width: r(42);
			height: r(42);
			img{
				width: 100%;
				height: 100%;
				margin-top: r(23);
				margin-right: r(17);
			}
		}
	}
	// 中部
	.section_content{
		width: 100%;
		height: 100%;
		overflow: auto;
		padding: r(89)  0 r(96);
		// position: absolute;
		// top: r(89);
		// bottom: r(96);
		
		
		
		.top{
			margin-left: r(27);
			width: r(213);
			height: r(56);
		}
		.top1{
			width: r(125);
			height: r(20);
			vertical-align: middle;
			margin-top: r(13);
			
			img{
				width: 100%;
				height: 100%;
			}	
		}
		
		.top2{
			margin-left: r(6);
			margin-top: r(12);
			height: r(22);
			border-left: 1px solid #8c8c8c;
		}
		.top3{
			width: r(67);
			height: r(24);
			margin-left: r(6);
			margin-top: r(14);
			img{
				width: 100%;
				height: 100%;
			}
		}
		
		.neir{
			height: r(300);
			width: 95%;
			position: relative;
			z-index: -1;
			img{
				width: 100%;
				height: 100%;
			}
			.neir1{
				width: 100%;
				height: r(104);
				position: absolute;
				background-color:rgba(0,0,0,0.4);
				top: 65%;
				
				h2{
					font-size: r(27);
					margin-top: r(24);
					margin-left: r(30);
					color: #FFFFFF;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					
				}
				
				.neir2{
					height: r(40);
					width: 100%;
					vertical-align: middle;
					margin-top: r(10);
					margin-left: r(30);
					.img{
						width: r(19);
						height: r(18);
						margin-top: r(4);
					}
					p{
						font-size: r(18);
						color: #FFFFFF;
						margin-top: r(4);
						margin-left: r(7);
					}
					.img1{
						width: r(21);
						height: r(12);
						margin-left: r(49);
						margin-top: r(9);
					}
					span{
						float: left;
						width: r(10);
						height: r(11);
						background-color: #FFFFFF;
						border-radius: r(45);
						margin-left: r(12);
						margin-top: r(9);
						
					}
					.sp{
						background-color: red;
						margin-left: r(67);
					}
					.sp1{
						font-size: r(18);
						color: #FFFFFF;
						margin-left: r(96);
						float: left;
					}
					
				}
			}
			
		}
		
		.av{
			// width: r(581);
			// height: r(181);
			width: 92%;
			
			margin-left: r(29);
			.av1{
				width: 62%;
				// width: r(324);
				// height: r(118);
				margin-top: r(30);
				h3{
					font-size: r(25);
					
				}
				
				img{
					width: r(19);
					height: r(18);
					margin-top: r(24);
					float: left;
				}
				p{
					float: left;
					color: #c5c5c5;
					margin-top: r(18);
					margin-left: r(7);
					line-height: r(34);
				}
				span{
					color: #c5c5c5;
					float: right;
					margin-top: r(24);
					font-size: r(20);
				}
				
			}
			.av2{
				width: r(208);
				// height: r(118);
				float: right;
				margin-top: r(30);
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.string{
			width: 92%;
			// width: 100%;
			background-color:rgba(0,0,0,0.1);
			margin-left: r(24);
			border: 1px solid #dddddd;
		}
		.string1{
			width: 98%;
			// width: r(640);
			height: r(25);
			border: 0.5px solid #dddddd;
			background-color:rgba(0,0,0,0.1);
		}
		
		// 三张图
		.three{
			width: 100%;
			height: r(230);
			h3{
				margin-top: r(34);
				margin-left: r(28);
		}
		
		}
		.pho{
			height: r(123);
			width: r(188);
			margin-left: r(28);
			margin-top: r(13);
			float: left;
		}
		.pho1{
			height: r(123);
			width: r(188);
			margin-left: r(12);
			margin-top: r(13);
			float: left;
		}
		.name{
			height: r(40);
			width: 100%;
			
			.na{
				width: r(27);
				height: r(27);
				margin-left: r(28);
				float: left;
				margin-top: r(11);
				}
			p{
				float: left;
				font-size: r(20);
				color: #c5c5c5;
				margin-left: r(10);
				margin-top: r(14);
			}
			.na2{
				float: left;
				margin-left: r(10);
				width: r(19);
				height: r(16);
				margin-top: r(19);
			}
			span{
				color: #c5c5c5;
				font-size: r(12);
				margin-left: r(5);
				float: left;
				margin-top: r(19);
			}
			.na3{
				float: left;
				margin-left: r(30);
				width: r(19);
				height: r(16);
				margin-top: r(19);
			}
			.nam{
				font-size: r(20);
				color: #c5c5c5;
				margin-top: r(14);
				margin-left: r(440);
			}
			
		}
		img{
			width: 100%;
			height: 100%;
		}
		
		.ston{
			width: r(583);
			background-color:rgba(0,0,0,0.1);
			
			border: 0.5px solid #dddddd;
			float: left;
			margin-top: r(13);
		}
		.btn{
			color: #bbbbbb;
			font-size: r(22);
			margin-top: r(21);
			margin-left: r(274);
		}
	}
	
	// 尾部
	.footer_content{
		position: absolute;
		bottom: 0;
		left: 0;
		height: r(96);
		width: 100%;
		background-color: #f5f5f5;
		li{
			float: left;
			width: 20%;
			text-align: center;
			
			a{
				color: #8c8c8c;
				
			}
			.li_img{
				height: r(46);
			}
			p{
				font-size: 12px;
			}
			
			
		}
		
	}
	
	

	
	
}

















// 左边
#left:checked ~ .ming {
	transform: translateX(0);
}
#left{
	display: none;
}

.ming{
	height: 100%;
	width: 100%;
	background-color: #21201b;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	transition: all .5s ease-in;
	
	.head{
		width: 100%;
		height: r(95);
		
		
		.iconfont{
			padding-top: r(17);
			margin-left: r(12);
			font-size: 25px;
			float: left;
			color: red;
		}
		input{
			width: r(545);
			height: r(50);
			border: 1px solid #FFFFFF;
			border-radius: 15px;
			float: left;
			margin-left: r(20);
			margin-top: r(17);
			background-color: #21201b;
			position: relative;
			text-indent: 3em;
			color: white;
		}
		.hea{
			position: absolute;
			left: r(80);
			color: #FFFFFF;
		}
		
	}
	.spring{
		width: 92%;
		// width: 100%;
		background-color:rgba(0,0,0,0.1);
		margin-left: r(24);
		border-bottom: 1px solid #dddddd;
		opacity: 0.2;
	}
	.spring2{
		width: 92%;
		// width: 100%;
		background-color:rgba(0,0,0,0.1);
		margin-left: r(24);
		border-bottom: 1px solid #dddddd;
		opacity: 0.2;
		margin-top: r(19);
	}
	
	.middle{
		width: 100%;
		height: r(395);
		
		.img{
			width: r(145);
			height: r(145);
			margin: 0 auto;
			text-align: center;
			img{
				width: 100%;
				height: 100%;
				margin-top: r(92);
			}
			h2{
				font-size: r(30);
				margin-top: r(19);
				color: #FFFFFF;
			}
			a{
				// color: #21201b;
				opacity: 0.2;
				color: #FFFFFF;
			}
			
		}
	}
	.spr{
		width: 92%;
		// width: 100%;
		background-color:rgba(0,0,0,0.5);
		margin-left: r(24);
		border: 4px solid #dddddd;
		opacity: 0.2;
	}
	
	
	// 底部
	.com{
		width: 100%;
		height: r(92);
		p{
			float: left;
			font-size: r(30);
			color: #FFFFFF;
			margin-top: r(53);
			margin-left: r(24);
		}
		span{
			float: left;
			font-size: r(30);
			color: #FFFFFF;
			margin-top: r(53);
			margin-left: r(470);
		}
	}
}



// 右边
#right:checked ~ .ning{
	transform: translateX(0);
}

#right{
	display: none;
	
	}
.ning{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(100%);
	transition: all 0.5s ease-in;
	background-color: #f1f1f1;
	
	.top{
		width: 100%;
		height: r(98);
		background-color: #21201b;
		input{
			width: r(545);
			height: r(50);
			border: 1px solid #FFFFFF;
			border-radius: 15px;
			float: left;
			margin-left: r(20);
			margin-top: r(17);
			background-color: #21201b;
			position: relative;
			text-indent: 3em;
			color: white;
		}
		.hea{
			position: absolute;
			color: #FFFFFF;
			top: r(25);
			left: r(26);
		}
		.button{
			color: #FFFFFF;
			font-size: r(30);
			line-height: r(90);
			margin-left: r(570);
		}
		
		.h2{
			font-size: r(35);
			font-weight: bold;
			margin-top: r(41);
			margin-left: r(30);
		}
		
		.row{
			height: r(238);
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: r(21);
			margin-left: r(30);
			.rows{
				padding:0 r(20);
				
				background-color: #FFFFFF;
				height: r(60);
				line-height: r(63);
				margin-right: r(11);
				margin-bottom: r(13);
				font-size: r(30);
				color: rgba(0, 0, 0, 0.6);
				// color: #dddddd;
			}
		}
		
	}
		
	
}


